<script lang="ts" setup>
import { ref } from 'vue'

// 自定义Props类型
type Props = {
  defaultValue?: number
}

const props = withDefaults(defineProps<Props>(), {
  defaultValue: 100
})

// 定义事件类型
const emit = defineEmits<{
  'range-change': [value: number]
}>()

const rangeValue = ref(props.defaultValue)
const changeHandler = (e: Event) => {
  rangeValue.value = Number((e.target as HTMLInputElement).value)
  // 触发事件
  emit('range-change', rangeValue.value)
}
</script>

<template>
  <div class="angle-box">
    <div class="title">Angle</div>
    <div class="angle-container">
      <input :value="rangeValue" @input="changeHandler" type="range" :min="0" :max="360" class="rangeInput" />
      <div class="count">{{ rangeValue }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.angle-box {
  width: 320px;
  margin-top: 20px;

  .title {
    font-size: 20px;
    color: #64748B;
    font-weight: 700;
  }

  .angle-container {
    display: flex;
    font-weight: 700;
    align-items: center;
    color: rgb(100, 116, 139);

    .rangeInput {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background-color: rgb(241, 245, 249);
      margin-right: 16px;
    }

    .count {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background-color: rgb(241, 245, 249);
      border-color: #e5e7eb;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  input[type="range"],
  input[type="range"]::-webkit-slider-runnable-track,
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  /* 滑轨样式 */
  input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: #F1F5F9;
  }

  /* 滑動鈕 樣式 */
  input[type="range"]::-webkit-slider-thumb {
    position: relative;
    height: 16px;
    width: 16px;
    margin-top: -5px;
    background-color: rgb(50, 115, 246);
    border-radius: 50%;
  }

}
</style>